<!DOCTYPE html>
<html lang="zh" xmlns: xmlns: xmlns: xmlns: xmlns: xmlns:>
<head>
    <meta charset="UTF-8">
    <title>vue入门案例</title>
    <!-- 引入vue.js资源-->
    <script type="application/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            color: darkgray
        }
        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }
    </style>
</head>
<!-- vue不能够直接作用在body元素上-->
<body>
        <!--
          v-band:绑定指令
          v-bind:属性名="Vue中的变量"
          不过.v-bind太麻烦,因此可以省略.直接写: 属性名='属性值'
        -->
 <div id="app">
     <button @click="color='red'">红色</button>
     <button @click="color='blue'">蓝色</button>
     <div id="box" :class="color"></div>
     <!--点击按钮,背景会切换颜色哦  -->
 </div>

</body>
<script>
    /*每个vue应用都是通过Vue函数创建一个新的VUE实例开始的.*/
    new Vue({
        el:"#app",//每个Vue实例都需要关联一段HTml模板,Vue会基于此模板进行视图渲染.我们可以通过el属性来指定.
        data: {//当Vue实例被创建时,它会尝试获取在data中定义的所有属性,用于视图的渲染.并且"监视"data中的属性变化,

         color: "red" //默认展示红色
        }
     });

</script>
</html>